<script setup>
import { ref, computed } from "vue";
//import "@/assets/css/dashboard-bootstrap.css";
import router from "@/router/index.js";
import { headerMsgs } from "@/stores/headerMsg.js";
import { useUserStore } from "@/stores/user.js";
import { ArrowDown } from '@element-plus/icons-vue';
const headerMsg = headerMsgs();
const userStore = useUserStore();
const sidebarCollapsed = ref(false);
const toggleSidebar = () => {
  sidebarCollapsed.value = !sidebarCollapsed.value;
};

const logout = () => {
  // 处理退出登录逻辑
  console.log("退出登录");
  userStore.logout();
  // 示例：跳转到登录页
  router.push('/login');
};

const avatarUrl = computed(() => {
  if (userStore.isAdmin) {
    return '/images/admin.png';
  } else if (userStore.isTeacher) {
    return '/images/teacher.png';
  } else {
    return '/images/student.png';
  }
});
</script>
<template>
  <!-- <el-header class="navbar navbar-light bg-light border-bottom"> -->
  <el-header class="app-header">
    <div class="container-fluid d-flex align-items-center">
      <el-button class="btn btn-sm" id="sidebarToggle" @click="toggleSidebar" style="border: none; box-shadow: none">
        <i class="bi bi-list"></i>
      </el-button>
      <div class="d-none d-md-block ms-3">
        <h5 class="mb-0">{{ headerMsg.headerTitle }}</h5>
      </div>
      <div class="ms-auto d-flex align-items-center">
        <el-dropdown class="me-3">
          <el-button type="text" class="position-relative" style="border: none; box-shadow: none">
            <i class="bi bi-bell"></i>
            <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
              3
            </span>
          </el-button>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item disabled>通知中心</el-dropdown-item>
              <el-dropdown-item @click="router.push('/message-center')">新课程已发布
              </el-dropdown-item>
              <el-dropdown-item @click="router.push('/message-center')">考核即将开始
              </el-dropdown-item>
              <el-dropdown-item @click="router.push('/message-center')">作业已批改
              </el-dropdown-item>
              <el-dropdown-item divided @click="router.push('/message-center')">查看全部
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
        <el-dropdown>
          <span class="el-dropdown-link d-flex align-items-center">
            <img :src="avatarUrl" alt="用户头像" width="32" height="32" class="rounded-circle me-2" />
            <span>{{ userStore.user.name }}</span>
            <el-icon class="el-icon--right"><arrow-down /></el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="router.push('/profile')">个人资料</el-dropdown-item>
              <el-dropdown-item>账号设置</el-dropdown-item>
              <el-dropdown-item divided @click="logout">退出登录
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
  </el-header>
</template>

<style scoped>
.app-header {
  /* 主要修改：使用柔和的天蓝色背景，并调整字体颜色为白色 */
  background-color: #87CEEB; /* 淡雅的天蓝色 */
  color: #fff;
  height: 100%;
  display: flex;
  width: 100%;
  align-items: center;
  padding: 0 20px; /* 恢复内边距 */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 修改图标和按钮颜色以适应新背景 */
.el-button#sidebarToggle,
.el-dropdown .el-button {
  color: #fff !important;
  background: transparent !important;
  border: none !important;
  font-size: 1.25rem;
  transition: all 0.3s;
}

.el-button#sidebarToggle:hover,
.el-dropdown .el-button:hover {
  background: rgba(255, 255, 255, 0.2) !important;
}

/* 修改标题颜色 */
:deep(.mb-0) {
  color: #fff;
  font-weight: 600;
}

/* 修改下拉链接（用户名）的颜色 */
.el-dropdown-link {
  cursor: pointer;
  color: #fff;
  display: flex;
  align-items: center;
}

/* 修改头像边框 */
.rounded-circle {
  border: 2px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 0 5px rgba(0,0,0,0.1);
}
</style>